<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
   <div id="container"></div>
   <button id="btn-change">change</button>

   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
   <script src="https://cdn.bootcss.com/snabbdom/0.7.3/tovnode.js"></script>
   <script>

       var  snabbdom=window.snabbdom

       //定义patch
       var patch=snabbdom.init([
           snabbdom_class,
           snabbdom_props,
           snabbdom_style,
           snabbdom_eventlisteners
       ])

       //定义h函数
       var h=snabbdom.h

       var container=document.getElementById('container')
        //生成vnode
       var vnode = h('ul#list',{},[
          h('li.item',{},'item1'),
          h('li.item',{},'item2'),
       ])
       patch(container,vnode)

    document.getElementById('btn-change').addEventListener('click',function(){
        //生成new-vnode
       var newVnode = h('ul#list',{},[
          h('li.item',{},'item1'),
          h('li.item',{},'itemB'),
          h('li.item',{},'itemF')
       ])
       patch(vnode,newVnode)
    })


   </script>

</body>
</html>